<template>
    <Modal :visible.sync="visible" :closeable="false" title="新建任务清单" @submit="save_new_task">
        <form>
            <view class="cu-form-group"><input :focus="focus" type="text" placeholder="输入新任务清单名称" class="new_task_input" v-model="task_name" /></view>
        </form>
    </Modal>
</template>

<script>
import BaseMixin from '../../mixins/BaseMixin.js';
import Modal from '../../components/colorui/modal.vue';

export default {
    components: { Modal },

    mixins: [BaseMixin],

    data() {
        return {
            visible: false,

            task_name: '',
            
            focus: false
        };
    },

    computed: {
        task_id() {
            return this.$store.state.todo.task_id;
        }
    },

    methods: {
        toggle() {
            this.visible = !this.visible;
            this.$forceUpdate();
        },

        save_new_task() {
            this.task_name = this.task_name.trim();

            if (!this.task_name) {
                alert('请输入清单名称');
                return;
            }

            this.post('/todo_tasks/', { task_name: this.task_name }).then(task => {
                this.$store.dispatch('todo/set_task_id', task.id);
                this.$emit('task-created', task);
                this.visible = false;
                this.$forceUpdate();
            });
        },

        go_home() {
            uni.navigateBack({});
        }
    },

    mounted() {
        const task_id = this.task_id;
        if (!task_id) {
            this.visible = true;
            this.focus = true;
        }
    }
};
</script>

<style scoped lang="scss">
.panel {
    background-color: white;
    padding: 0 20upx;
    border-radius: 5upx;

    .header {
        padding: 15upx 20upx;
        box-sizing: border-box;

        border-bottom: #c0c0c0 1px solid;
        margin: 0 -20upx;

        .title {
            // font-size: 16upx;
        }
    }

    .body {
        padding: 40upx 10px;
        box-sizing: border-box;

        .new_task_input {
            border-bottom: #007aff 1px solid;
            margin: auto;
        }
    }

    .actions {
        display: flex;
        justify-content: center;
        align-items: center;

        padding: 20upx 0;
        box-sizing: border-box;
        margin: 0 -20upx;

        .action-item {
            flex: 1;
            text-align: center;
        }

        .action-item:last-child {
            color: #4cd964;
        }
    }
}
</style>
